<template>
	<div class="layout-pd">
		<el-button plain @click="dialogFormVisible = true" type="primary"> 发布作业 </el-button>
		<el-table
				:data="state.tableData.data"
				v-loading="state.tableData.loading"
				style="width: 100%"
				row-key="path"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			>
			<el-table-column prop="hid" label="id" width="100" />
			<el-table-column prop="name" label="作业名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="starttime" label="发布时间" show-overflow-tooltip></el-table-column>
			<el-table-column prop="endtime" label="截止时间" show-overflow-tooltip></el-table-column>
			<el-table-column prop="content" label="作业要求" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" width="100">
				<template #default="scope">
					<el-button size="small" text type="primary" plain @click="dialogFormVisible1 = true">修改</el-button>
					<el-button size="small" text type="primary" plain @click="dialogFormVisible = false">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
	<!-- 添加框 -->
  <el-dialog v-model="dialogFormVisible" title="添加作业" width="500">
	<el-form :model="form">
			<el-form-item label="作业名称" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off" />
			</el-form-item>
			<el-form-item type="datetime"  label="发布时间" :label-width="formLabelWidth">
				<el-date-picker v-model="form.starttime" style="width: 288px" type="datetime"  />
			</el-form-item>
			<el-form-item label="截止时间" :label-width="formLabelWidth">
				<el-date-picker v-model="form.endtime" style="width: 288px" type="datetime"  autocomplete="off" />
			</el-form-item>
			<el-form-item label="作业要求" :label-width="formLabelWidth">
				<el-input v-model="form.content" autocomplete="off" />
			</el-form-item>
		</el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">退出</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
      </div>
    </template>
  </el-dialog>
     <!-- 修改框 -->
	<el-dialog v-model="dialogFormVisible1" title="编辑作业" width="500">
	<el-form :model="form">
			<el-form-item label="作业名称" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off" />
			</el-form-item>
			<el-form-item type="datetime" label="发布时间" :label-width="formLabelWidth">
				<div class="block">
				<el-date-picker v-model="form.starttime" style="width: 288px" type="datetime" placeholder="Select date and time" />
			</div>
			</el-form-item>
			<el-form-item label="截止时间" :label-width="formLabelWidth">
				<el-date-picker v-model="form.endtime" style="width: 288px" type="datetime" placeholder="截止时间" autocomplete="off" />
			</el-form-item>
			<el-form-item label="作业要求" :label-width="formLabelWidth">
				<el-input v-model="form.content" autocomplete="off" />
			</el-form-item>
		</el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">退出</el-button>
        <el-button type="primary" @click="dialogFormVisible1 = false">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="home">
// defineProps({
// 	dialogFormVisible:{
// 		type:Boolean,
// 		default:false
// 	}
// })

// import Cookies from 'js-cookie';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';

// import { Session } from '/@/utils/storage';
// import { frontEndsResetRoute, setAddRoute, setFilterMenuAndCacheTagsViewRoutes } from '/@/router/frontEnd';
import { reactive, onMounted, ref } from 'vue';
import { scriptApi } from '/@/api/script/index';

// 定义变量内容
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
const userAuth = ref('');
// eslint-disable-next-line vue/no-dupe-keys
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
const formLabelWidth = '140px';
// 定义变量内容
// const roleDialogRef = ref();
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			search: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
});
const form = ref({
	name: '',
	starttime: '',
	endtime: '',
	content: '',
});
// 添加作业

//获取所有作业

// 初始化用户权限
// const initUserAuth = () => {
// 	userAuth.value = userInfos.value.roles[0];
// };
// 用户权限改变时
const onRadioChange = async () => {
	scriptApi()
		.getHomeWork()
		.then((res) => {
			state.tableData.data = res.data;
			// console.log(res)
		});
};
// 页面加载时
onMounted(() => {
	// initUserAuth();
	onRadioChange();
});
</script>
<style scoped>
.demo-datetime-picker .demonstration {
	display: block;
	color: var(--el-text-color-secondary);
	font-size: 14px;
	margin-bottom: 20px;
}
</style>